<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>workDetail</title>
    <!--引入bootstrap和jQuery以及该html对应的css和js文件-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="/js/workDetail.js" ></script>
    <link href="/css/workDetail.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding-top: 210px">
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="z-index: 99999">
    <div class="container" >
        <!--注册和登录按钮-->
        <ul class="nav navbar-nav navbar-right " id="logAcount" >
            <li><a href="/html/signIn.html"><span class="glyphicon glyphicon-user"></span> REGISTER</a></li>
            <li><a href="/html/login.html"><span class="glyphicon glyphicon-log-in"></span> SIGN IN</a></li>
        </ul>
        <!---->
        <!--当页面宽度变小后，导航栏收拢变成三条小杠，点击可以打开导航栏-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/html/home.html"><img src="../img/coding.png" alt="" style="width: 210px; height: 40px;margin-top: -9px"></a>
        </div>
        <!---->
        <!--导航栏上的选项-->
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li ><a href="/html/home.html">ALL JOBS</a></li>
                <li><a href="/html/postJob.html">POST A JOB</a></li>
                <li><a href="/html/myPost.html">MY POST</a></li>
                <li><a href="/html/accountDetail.html">ACCOUNT</a></li>
            </ul>
        </div>
        <!---->
    </div>
</nav>
<!---->
<nav class="navbar  navbar-fixed-top" role="navigation" style="margin-top: 20px!important;">
    <div class="container" style="width: 100%;height: 50px"></div>
    <div  style="width: 100%;height: 160px;background-color: #209b60;margin-top: -20px ;padding: 40px">
        <div class="container">
            <div class="col-sm-6" >
                <h1 style="color: white">WORK</h1>
            </div>

            <div class="col-sm-6 text-right"  >
                <ol class="breadcrumb" >
                    <li>
                        <a href="/html/home.html" >Home</a>
                    </li>
                    <li style="color: white">work detail</li>
                </ol>
            </div>
        </div>
    </div>
</nav>
<p id="test" type="text" style="text-align: center;width:100%; position: absolute ;"></p>
<br>

<div class="container"  id="workDetail">


</div>
<div class="container" id="content" style="width: 500px;">
    <form id="form1">
        <div class="accountInfo">
            <!--&lt;!&ndash;Email输入框&ndash;&gt;-->
            <!--<div class="input-group input-login detailE" style="margin: 100px auto 0 auto">-->
                <!--<input type="text" class="form-control input-login" id="title" readonly="readonly" placeholder="Title" >-->
                <!--<span class="input-group-addon input-group-addon-icon"  >-->
                <!--<span class="glyphicon glyphicon-user glyphicon-icon" ></span></span>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--&lt;!&ndash;公司名称输入框&ndash;&gt;-->
            <!--<div class="input-group input-login detailE" style="margin: 50px auto 0 auto">-->
                <!--<input type="text" class="form-control input-login " id="company" readonly="readonly" placeholder="CompanyName">-->
                <!--<span class="input-group-addon input-group-addon-icon">-->
                <!--<span class="glyphicon glyphicon glyphicon-dashboard glyphicon-icon"></span></span>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--&lt;!&ndash;公司地址输入框&ndash;&gt;-->
            <!--<div class="input-group input-login detailE" style="margin: 50px auto 0 auto">-->
                <!--<input type="text" class="form-control input-login " id="description" readonly="readonly" placeholder="Description">-->
                <!--<span class="input-group-addon input-group-addon-icon ">-->
                <!--<span class="glyphicon glyphicon glyphicon-record glyphicon-icon"></span></span>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--&lt;!&ndash;公司所属行业输入框&ndash;&gt;-->
            <!--<div class="input-group input-login detailE" style="margin: 50px auto 0 auto">-->
                <!--<input type="text" class="form-control input-login " id="tags" readonly="readonly" placeholder="Apply">-->
                <!--<span class="input-group-addon input-group-addon-icon">-->
                <!--<span class="glyphicon glyphicon-globe glyphicon-icon"></span></span>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--&lt;!&ndash;password输入框&ndash;&gt;-->
            <!--<div class="input-group input-login detailE" style="margin: 50px auto 0 auto">-->
                <!--<input type="text" class="form-control input-login " id="apply" readonly="readonly" placeholder="Date">-->
                <!--<span class="input-group-addon input-group-addon-icon">-->
                <!--<span class="glyphicon glyphicon-lock glyphicon-icon"></span></span>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--<br>-->
            <!--&lt;!&ndash;发布和编辑按钮&ndash;&gt;-->
            <!--<div class="btn-group btn-group-justified" >-->
                <!--<div class="btn-group" role="group">-->
                    <!--<button type="button" class="btn btn-default" id="publish">publish</button>-->
                <!--</div>-->
                <!--<div class="btn-group" role="group">-->
                    <!--<button type="button" class="btn btn-default" id="edit">edit</button>-->
                <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash;&ndash;&gt;-->
            <!--发布和编辑按钮-->
            <div class="bs-example" style="width: 500px; margin: 40px auto 0 auto">
                <button type="button" class="btn btn-primary" id="publish" style="width: 500px;height: 50px">PUBLISH</button>
                <br><br>
                <button type="button" class="btn btn-primary" id="edit" style="width: 500px;height: 50px">EDIT</button>
            </div>
            <!---->
        </div>
    </form>
</div>
<!--页脚-->
<div id="footer">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col" id="col1">
            <div id="rc1">
                <h1 class="h">COURSES</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col2">
            <div id="rc2">
                <h1 class="h">QUICK LINKS</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3 col" id="col3">
            <h1>RECENT POST</h1>
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#" class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col4">
            <h1>CONTACT US</h1>
            <p class="fa fa-wechat"></p>
            <p><span class="a2">微信客服：</span> <span class="a3">codingirls</span></p>
            <p class="a1">Monday - Friday - 9:Am to 5 Pm</p>
            <p class="a1">Questions: info@codingirls.club</p>
            <a href=""></a>
        </div>
    </div>
</div>
<div id="info">
    <div id="info1">© Coding Girls Club Copyright 2016 - 2017. All Right Reserved.</div>
</div>
<!---->
<script>
    window.onload=function () {
        let emailId=sessionStorage.getItem("emailId");
        if(sessionStorage.getItem("emailId")){
            $("#logAcount").empty();
            let str=`<li><a href="/html/accountDetail.html"><span class="glyphicon glyphicon-user"></span> ${emailId}</a></li>`;
            str+=`<li><a href="/html/home.html" onclick="sessionStorage.clear()"><span class="glyphicon glyphicon-log-out"></span> EXIT</a></li>`
            $("#logAcount").append(str);
        }else {
            $('#test').empty();
            $('#positionMaster').empty();
            let str = "<div class='alert alert-info alert-dismissible' role='alert' style='font-size: 20px'>"+
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                "<span aria-hidden='true'>&times;</span>"+"</button>"+" ATTENTION&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please log in first;</div>";
            $('#test').append(str);

        }
        judgePublish();
        publish();
        edit();
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr === 304) {
                    var response = xhr.responseText;
                    var responseJson = JSON.parse(response);
                    var responseObj = responseJson[0];
                    var form = document.getElementById("form1");
                    let position=responseObj;
                    let str = `<h1>${position.title} <small style="color: #209b60;">TO  ${position.expiryDate}</small></h1><br>`
                    let temp=position.tags.split("/");
                    for(let i=0;i<temp.length;i++){
                        if(i%3==0){
                            str+=`  <span class="label label-primary">${temp[i]}</span>`
                        }else if(i%3==1){
                            str+=`  <span class="label label-warning">${temp[i]}</span>`
                        }else if(i%3==2){
                            str+=`  <span class="label label-danger">${temp[i]}</span>`
                        }

                    }

                    str+=` <span class="label label-primary"> ${position.jobType} </span>&nbsp; <span class="label label-success"> ${position.category}</span><br><br>
                    <h2>${position.country}  ${position.city}</h2>
                    <br><br>
                    <h4>招聘公司：${position.company}</h4>
                    <br><br>
                    <h4>求职过程：${position.applyMethod}</h4>
                    <br><br>

                        <blockquote style=" font-size: 18px">
                            ${position.description}
                        </blockquote>
                </div>`;
                    //alert(str)
                    $('#workDetail').append(str);
//                    form.elements[0].value = responseObj.title;
//                    form.elements[1].value = responseObj.company;
//                    form.elements[2].value = responseObj.description;
//                    form.elements[3].value = responseObj.tags;
//                    form.elements[4].value = responseObj.applyMethod;
                }
                else {
                    alert("error");
                }
            }
        };
        var urlArr = document.URL.split('?');
//        alert(urlArr);
//        var value = urlArr[1].split("&");
//        alert(value);
//        var emailId = value[0].split("=")[1];
//        var Id = value[1].split("=")[1];
//        var url = `http://127.0.0.1:8081/usrs/${emailId}/positions/${Id}`;
        xhr.open("get",`/usrs/workDetail?${urlArr[1]}`,true);
        xhr.send(null);
    };
    function publish() {
        var publish = document.getElementById("publish");
        var edit = document.getElementById("edit");
        publish.addEventListener("click",function (event) {
            event.preventDefault();
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300||xhr===304){
                        //发布成功
                        $('#test').empty();
                        let str = "<div class='alert alert-success alert-dismissible' role='alert'>"+
                            "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                            "<span aria-hidden='true'>&times;</span>"+"</button>"+"SUCCESS&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Publish successfully</div>";
                        $('#test').append(str);
                        window.location.href = `/html/myPost.html`;
                        //
                        publish.style.display = "none";
                    }
                }
            };
            var urlArr = document.URL.split('?');
            xhr.open("get",`/users/workDetail/publish?${urlArr[1]}`,true);
            xhr.send(null);
        })
    }

    function judgePublish() {
        var publish = document.getElementById("publish");
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300||xhr===304){
                    var response = xhr.responseText;
                    if(response==="public"){
                        publish.style.display = "none";
                    } else {
                        publish.style.display = "inherit";
                    }
                }
            }
        };
        var urlArr = document.URL.split('?');
        xhr.open("get",`/users/workDetail/publishCondition?${urlArr[1]}`,true);
        xhr.send(null);
    }

    function edit() {
        var edit = document.getElementById("edit");
        edit.addEventListener("click",function(event){
            event.preventDefault();
            var urlArr = document.URL.split('?');
            window.location.href = `edit.html?${urlArr[1]}`;
        })
    }
</script>
</body>

<!--* title：**id=title**-->
<!--* company：**id=company**-->
<!--* description：**id=description**(支持简单的富文本编辑；如果能再同时支持markdown，会有加分)-->
<!--* tags：**id =tags**-->
<!--* how to apply：**id=apply**(支持简单的富文本编辑；如果能再同时支持markdown，会有加分)-->
<!--* **id=publish**（有一个发布的按钮）-->
<!--* **id=edit**（有一个编辑的按钮）-->
</html>